<template>
	<view class="content">
		<!-- 首页轮播图 -->
		<base-swiper v-if="isSwiper" :data="swiperData" :swiperLength="swiperNum"/>
		<!-- 最新咨询模块 -->
		<view class="new-information">
			<image src="../../static/组 3.png" mode="widthFix"></image>
			<view class="new-information-text">
				<span class="dot"></span>
				<text>发展全过程人民民主 彰显中国式民主</text>
			</view>
		</view>

		<!-- 要闻咨询模块 -->
		<view class="import-new">
			<view class="import-header">
				<view class="iheader-left">
					<view class="iheader-title">
						要闻咨询
					</view>
					<view class="iheader-blank">
						|
					</view>
					<view class="iheader-smalltitle">
						每日最新精彩资讯
					</view>
				</view>
				<view class="iheader-right">
					<view class="iheader-more" @click="toUrl('要闻聚焦')">
						查看更多
					</view>
				</view>
			</view>
			<view class="import-body">

				<view class="import-text" v-for="(item,index) in importNewData" :key="index"
					@click="navgitorNewDetile(item.id,0)">
					<view class="dot"></view>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>

		<!-- 专题模块 -->
		<view class="theme">

			<view class="theme-header">
				<view class="theme-header-title">
					热点专题
				</view>
				<view class="theme-header-more" @click="toUrl('热点专题')">
					查看更多
				</view>
			</view>
			<view class="theme-player">
				<base-scroll-video v-if="topic" :scrollVideoData="topicScrollData"/>
			</view>
		</view>
		<!-- 直播访谈模块 -->

		<view class="theme">
			<view class="theme-header">
				<view class="theme-header-title">
					直播访谈
				</view>
				<view class="theme-header-more" @click="toUrl('直播访谈')">
					查看更多
				</view>
			</view>
			<view class="theme-player">
				<base-scroll-video v-if="live" :isNew="false" :scrollVideoData="liveScrollData"/>
			</view>
		</view>
		<view class="theme">

			<view class="theme-header">
				<view class="theme-header-title">
					专题·栏目
				</view>
				<view class="theme-header-more" @click="toUrl('专题·栏目',0)">
					查看更多
				</view>
			</view>
			<view class="theme-player">
				<base-scroll-video :scrollVideoData="columnScrollData" :isRequest="false"/>
			</view>
		</view>

		<!-- 空中课堂 -->
		<view class="theme" style="height: 82upx;">
			<view class="theme-header">
				<view class="theme-header-title">
					空中课堂
				</view>
				<view class="theme-header-more" style="margin-left: 458upx;" @click="toUrl('空中课堂')">
					查看更多
				</view>
			</view>
		</view>
		<view class="classroom-body" v-for="(item,index) in classRoomData" :key="index"
			@click="navgitorNewDetile(item.id,1)">
			<view class="classroom-body-left">
				<image :src="'/api'+item.image" style="width: 262upx;height: 147upx;border-radius: 12upx;"></image>
			</view>
			<view class="classroom-body-right">
				<view class="body-right-title">
					{{item.title}}
				</view>
				<view class="body-right-number">
					{{item.browseNum}}播放
				</view>
			</view>
		</view>

		<!-- 微视频模块 -->
		<view class="theme">

			<view class="theme-header">
				<view class="theme-header-title">
					微视频
				</view>
				<view class="theme-header-more" style="margin-left: 490upx;" @click="toUrl('微视频')">
					查看更多
				</view>
			</view>
			<view class="theme-player">
				<view class="player-ibox">
					<base-scroll-video v-if="micro" :isNew="false" :scrollVideoData="microScrollData"/>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAllBannerList,
		getAllNavigationList,
		getNavigationContext,
	} from '../../api/api.js'
	export default {
		data() {
			return {
				swiperData: [],
				importNewData: [],
				topicScrollData: [],
				liveScrollData: [],
				columnScrollData: [{
					image: '../../static/column1.png',
					title: '福建教育报道'
				}, {
					image: '../../static/column2.jpg',
					title: '乡约科普'
				}, {
					image: '../../static/column3.png',
					title: '福娃过大年'
				}, ],
				classRoomData: [],
				microScrollData: [],
				swiperNum: 0,
				isSwiper: false,
				topic: false,
				live: false,
				class: false,
				micro: false,
			};
		},
		mounted() {
			getAllBannerList().then(res => {
				this.swiperData = res.data
				this.swiperNum = res.data.length
				this.isSwiper = true
			})
			this.getData('要闻聚焦')
			this.getData('直播访谈')
			this.getData('空中课堂')
			this.getData('微视频')
			this.getList()
		},
		methods: {
			getData(title) {
				let option = title == '要闻聚焦' ? {
					pageSize: 3,
					pageNum: 1,
					isAsc: 'desc',
					orderByColumn: 'createTime',
					title: title
				} : {
					pageSize: 4,
					pageNum: 1,
					isAsc: 'desc',
					orderByColumn: 'createTime',
					title: title
				}
				getNavigationContext(option).then(res => {
					if (title == '要闻聚焦') {
						this.importNewData = res.data.records
					} else if (title == '直播访谈') {
						this.liveScrollData = res.data.records
						this.live = true
					} else if (title == '空中课堂') {
						this.classRoomData = res.data.records
						this.class = true
					} else if (title == '微视频') {
						this.microScrollData = res.data.records
						this.micro = true
					}
				})
			},
			getList() {
				getAllNavigationList({
					recommend: 1,
					isAsc: 'asc',
				}).then(res => {
					this.topicScrollData = res.data
					this.topic = true
				})
			},
			navgitorNewDetile(id, i) {
				uni.navigateTo({
					url: '/subpages/news-detail/news-detail?id=' + id
				})
			},
			toUrl(title) {
				uni.navigateTo({
					url: "../../subpages/news/news?title=" + title
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;

		// 最新咨询模块
		.new-information {
			width: 704rpx;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.new-information>image {
			width: 159rpx;
		}

		.new-information>.new-information-text {
			width: 500rpx;
			display: flex;
			align-items: center;
		}

		.dot {
			width: 8rpx;
			height: 8rpx;
			background: #BA0825;
			border-radius: 50%;
			margin: 0 12rpx;
		}

		.new-information>.new-information-text>text {
			width: 500rpx;
			font-size: 28rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #272727;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.flash-new {
			display: flex;
			align-items: center;
			width: 100%;
			height: 40upx;
			margin-left: 23upx;

			.flash-new-img {
				width: 159upx;
				height: 30upx;
			}

			.news {
				width: 700rpx;
				margin-left: 20upx;
				overflow: hidden;

				.news-title {
					width: 500rpx;
					font-size: 32upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #272727;
					line-height: 38upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		// 要闻咨询模块
		.import-new {
			box-sizing: border-box;
			width: 704upx;
			height: 292upx;
			background-color: #FFFFFF;
			border-radius: 12px;
			margin: 20upx 0;
			box-shadow: 0px 1px 10px 2px rgba($color: #a5a5a5, $alpha: 0.3);
			margin-left: 23upx;
			padding: 20upx;

			.import-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.iheader-left {
					display: flex;
				}

				.iheader-title {
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #272727;
					line-height: 58upx;
					font-size: 30upx;
				}

				.iheader-blank {
					font-weight: 300;
					color: #777777;
					line-height: 68upx;
					margin: 0 20upx;

				}

				.iheader-smalltitle {
					font-size: 26upx;
					font-family: Noto Sans S Chinese;
					font-weight: 300;
					font-style: italic;
					color: #777777;
					line-height: 68upx
				}

				.iheader-right {
					line-height: 34px;
				}

				.iheader-more {
					font-size: 22upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #676767;
					line-height: 68upx;
				}

			}

			.import-body {
				font-size: 28upx;
				font-family: Noto Sans S Chinese;
				font-weight: 300;
				color: #272727;
				line-height: 58upx;

				.import-text {
					width: 664rpx;
					display: flex;
					align-items: center;
				}

				.import-text>text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		//广告模块
		.advertisement-box {
			width: 704upx;
			height: 212upx;
			margin-left: 23upx;
			margin-top: 34upx;
			border-radius: 12upx;

			.advertisement-img {
				width: 704upx;
				height: 212upx;
				border-radius: 12upx;
			}
		}

		//专题模块和直播访谈模块
		.theme {
			width: auto;
			margin: 34rpx 22rpx 0 22rpx;

			.theme-header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.theme-header-title {
					font-size: 33upx;
					font-family: Noto Sans S Chinese;
					font-weight: bold;
					color: #272727;

				}

				.theme-header-more {
					font-size: 22upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #676767;

				}

				.theme-header-more2 {
					margin-left: 458upx;
					font-size: 22upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #676767;

				}
			}

			.theme-player {
				margin-top: 20upx;

				.player-img {
					width: 382upx;
					height: 214upx;
					margin-right: 10upx;
					background: #281C7B;
					border-radius: 12upx;
				}

				.player-title {
					font-size: 28upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #000000;
					line-height: 58upx;
					margin-right: 47upx;
					margin-left: 20upx;
				}

				.player-title-back {
					margin-left: 159upx;

				}

				.swiper-time {
					position: absolute;
					font-size: 46upx;
					font-family: DIN Condensed;
					font-weight: bold;
					color: #FFFFFF;
				}

				.swiper-time-box1 {
					position: absolute;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					width: 242upx;
					height: 52upx;
					top: 140upx;
					left: 10upx;
				}

				.swiper-time-box2 {
					position: absolute;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					width: 242upx;
					height: 52upx;
					top: 140upx;
					left: 400upx;
				}

				.player-iocn {
					position: absolute;
					font-size: 24upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 44upx;
					width: 119upx;
					height: 44upx;
					background: #00D975;
					border-radius: 12upx;
					display: flex;
					justify-content: center;
					top: 0upx;
					left: 10upx;
				}

				.icon-right {
					left: 400upx;
				}
			}


		}

		// 自制栏目

		// 空中课堂
		.classroom-body {
			display: flex;
			width: 704upx;
			height: 146upx;
			margin-left: 23upx;
			margin-bottom: 21upx;

			.classroom-body-left {
				width: auto;
				height: 62upx;

			}

			.classroom-body-right {
				margin-left: 21upx;
				height: 62px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.body-right-title {
					font-size: 30upx;
					font-family: Noto Sans S Chinese;
					font-weight: 700;
					color: #000000;
					overflow: hidden;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					box-orient: vertical;

				}

				.body-right-number {
					font-size: 24upx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #808080;

				}
			}
		}



	}
</style>
